<template>
  <div class="home" style="padding: 10px" ref="homeBoxRef">
        <div v-if="noApproval" style="margin-top: 50px">
          <a-empty description="暂无审批，管理员可前往电脑端添加" />
        </div>
        <div class="approval-box" v-else>
          <a-row
            v-for="(data, dataIndex) of dataList"
            :key="data.id"
            :gutter="[12, 12]"
          >
            <template v-if="data.approval_list && data.approval_list.length">
              <a-col :span="24" :class="{ 'mt-20': dataIndex > 0 }">
                <div class="text-title">{{ data.cat_name }}</div>
              </a-col>
              <a-col
                :xs="24"
                :md="6"
                :lg="4"
                v-for="approval of data.approval_list"
                :key="approval.id"
              >
                <div class="approval" @click="startApproval(approval)">
                  <img :src="approval.icon" class="icon" />
                  <div class="info">
                    <div class="name no-wrap">{{ approval.name }}</div>
                    <div class="desc no-wrap">{{ approval.desc }}</div>
                  </div>
                </div>
              </a-col>
            </template>
          </a-row>
        </div>

  </div>
</template>

<script>
import {
  defineComponent,
  onActivated,
  reactive,
  toRaw,
  toRefs,
  ref,
  nextTick,
} from "vue";
import request from "../../../common/utils/request";
import { useRouter } from "vue-router";
import moment from "moment";
import approval from "../../../store/modules/approval";
import { Modal } from "ant-design-vue";

const dateFormatStr = "YYYY-MM-DD";
const ranges = {
  今天: [moment(), moment()],
  本周: [moment().startOf("week"), moment().endOf("week")],
  本月: [moment().startOf("month"), moment().endOf("month")],
  本年: [moment().startOf("year"), moment().endOf("year")],
};

const recordsTab = [
  { value: "todo", label: "待审批" },
  { value: "complete", label: "已审批" },
  { value: "cc", label: "抄送我" },
  { value: "start", label: "已发起" },
];
const statusList = [
  { value: -1, label: "所有" },
  { value: 0, label: "审批中" },
  { value: 1, label: "已通过" },
  { value: 2, label: "已拒绝" },
  { value: 4, label: "已撤销" },
];
const colorList = {
  0: "blue",
  1: "green",
  2: "red",
  4: "gray",
};

export default defineComponent({
  name: "home",
  components: {},
  setup() {
    const router = useRouter();
    const state = reactive({
      noApproval: false,
      dataList: [],
      recordTotal: 0,
      recordList: [],
      noRecord: false,
      rangeDate: [],
    });

    /** 审批中心 */

    const filterState = reactive({
      type: "todo",
      status: -1,
      page: 1,
      pageSize: 10,
      rangeDate: [],
    });



    const startApproval = (approval) => {
      if (approval.process.length == 0) {
        Modal.info({
          title: "提示",
          content: () => "请管理员前往管理后台初始化该审批，并完善审批流程",
          centered: true,
        });
        return;
      }
      router.push({
        name: "StartApproval",
        query: { id: approval.id },
      });
    };

    const getList = () => {
      request.get("/work_approval", "/staff/approval/list").then((res) => {
        state.dataList = res.list;
        state.noApproval = res.list.length == 0;
      });
    };

    const homeBoxRef = ref(null);

    const init = () => {
      getList();
    };

    init();


    return {
      recordsTab,
      colorList,
      statusList,
      filterState,
      dateFormatStr,
      ranges,
      ...toRefs(state),
      startApproval,
      homeBoxRef,
    };
  },
});
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  // background: #fff;
  // min-height: 100%;
  .approval-box {
    padding: 10px 20px;

    .approval {
      border: 1px solid #fff;
      box-shadow: @box-shadow-base;
      padding: 20px;
      height: 80px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      .icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
      .info {
        margin-left: 8px;
        flex: 1;
        line-height: 24px;
        overflow: hidden;
        .name {
          color: rgba(0, 0, 0, 1);
          font-weight: 500;
          font-size: 15px;
        }
        .desc {
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
  .record-box {
    display: flex;
    overflow: hidden;
    .left {
      width: 460px;
      height: 100%;
      margin-right: 20px;
      position: relative;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;

      // padding-right: 20px;
      // border-right: 1px solid #f1f1f1;
      .filter-box,
      .pagination-box {
        position: absolute;
        left: 1px;
        right: 1px;
        background: #fff;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 0 8px;

        // padding-right: 8px;
        // border: 1px solid #ddd;
      }
      .filter-box {
        top: 0;
        border-bottom: 1px solid #ddd;
        height: 50px;
      }
      .pagination-box {
        height: 40px;
        bottom: 0;
        border-top: 1px solid #ddd;
        text-align: right;
        justify-content: flex-end;
      }
      .content {
        padding: 50px 0;
        height: 100%;
        overflow: hidden auto;
        // background: #fefefe;
        .record-item {
          cursor: pointer;
          user-select: none;
          padding: 0 8px;
          // box-shadow: @box-shadow-base;

          .title {
            color: #666;
          }
          .user {
            font-size: 12px;
            color: #999;
          }
        }
        .active {
          border: 1px solid @primary-color;
          background: @primary-color-bg;
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      position: relative;
      // box-shadow: @box-shadow-base;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      // margin-right: 20px;
    }
  }
}
:deep(.ant-tabs-nav) {
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
}
</style>
